<template>
  <common-list>
    <common-table slot="content" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55" align="left" />-->

      <el-table-column label="策略名称" align="left" >
        <template slot-scope="{row}">{{ row.ruleName }}</template>
      </el-table-column>

      <el-table-column label="每周操作时间" align="left"  width="460">
        <template slot-scope="{row}">
          <template v-for="item in row.weekDays">
            <el-tag type="primary" style="margin-right: 4px" v-if="item === '1'">周一</el-tag>
            <el-tag type="primary" style="margin-right: 4px" v-if="item === '2'">周二</el-tag>
            <el-tag type="primary" style="margin-right: 4px" v-if="item === '3'">周三</el-tag>
            <el-tag type="primary" style="margin-right: 4px" v-if="item === '4'">周四</el-tag>
            <el-tag type="primary" style="margin-right: 4px" v-if="item === '5'">周五</el-tag>
            <el-tag type="primary" style="margin-right: 4px" v-if="item === '6'">周六</el-tag>
            <el-tag type="primary" v-if="item === '7'">周日</el-tag>
          </template>
          <!-- {{ row.weekDays }} -->
        </template>
      </el-table-column>

      <el-table-column label="每日操作开始时间" align="left" width="140">
        <template slot-scope="{row}">{{ '每日' + row.beginTime + '点' }}</template>
      </el-table-column>

      <el-table-column label="每日操作结束时间" align="left" width="140" >
        <template slot-scope="{row}">{{ '每日' + row.endTime + '点' }}</template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="52">
        <template slot-scope="{row}">
          <el-button type="text" @click="edit(row)" v-hasPermi="['system:vsittimerule:update']">编辑</el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination slot="pagination" v-show="total>0" :total="total" :page.sync="query.pageNum"
                :limit.sync="query.pageSize" @pagination="getList"/>
    <!-- 列表 end -->
    <editDialog ref="editDialog" @refresh="getList"/>
  </common-list>
</template>

<script>
import { vsittimerule_queryPageList } from '@/api/management/configure/index.js'
import editDialog from './components/timeDialog'
import BaseList from '@/mixins/BaseList'

export default {
  mixins: [BaseList],
  components: { editDialog },
  props: {},
  data() {
    return {
      total: 1, // 总条数
      loading: false, // table 加载中
      list: [{ weekDays: [] }], // 数据列
      selectionIds: '', // 列表选中数据id
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      query: {
        pageNum: 1,
        pageSize: 10
      } // 查询条件
    }
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 选择
     */
    handleSelectionChange(selection) {
      this.selectionIds = selection.map((item) => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /**
     * 获取列表
     */
    getList() {
      this.loading = true
      vsittimerule_queryPageList({ ...this.query }).then(res => {
        if (res && res.code === 200) {
          this.list = res.rows.reduce((r, c) => {
            r.push({
              ...c,
              weekDays: c.weekDays.split(',')
            })
            return r
          },[])
          this.total = res.total
        } else {
          this.list = []
          this.total = 0
          this.handleListTips(res)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 添加/编辑
     */
    edit(row) {
      this.$refs.editDialog.show(row ? { ...row } : {})
    }
  },
  created() {
    this.getList()
  },
  mounted() {
  }
}
</script>
<style lang="scss">
.safe-time {
  .time-item {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #1777ce;
    border-radius: 4px;
    color: #1777ce;
    font-size: 13px;
    margin: 4px 4px;
  }

}
</style>
